<template>
  <div class="content">
    <div class="head">
      <img class="bj" src="https://zxsd-oss-img.oss-cn-chengdu.aliyuncs.com/e7bcedcae7b34066787c3d1347b8969be2e65b432e93b9e4989ebfd7b385327f.jpg" alt="" />
      <div class="tx_box">
        <p class="title">当前余额</p>
        <p class="price"><span>¥</span>{{ balance }}</p>
      </div>
    </div>
    <div class="balance">
      <img src="/static/wallet-icon1.png" alt="" />
      <div class="input_box">
        <p class="title">请输入充值金额</p>
        <p class="input"><span>¥</span><input v-model="payPrice" type="text" /></p>
      </div>

      <u-button
        :disabled="isDisable"
        loadingMode="circle"
        :loading="isDisable"
        loadingText="充值中..."
        type="primary"
        text="充值到余额"
        @click='czSubmit'
      >
      </u-button>
      <p class="text">充值到账户余额，可随时申请提现</p>
    </div>
  </div>
</template>

<script>
import { mapState } from "vuex"
import api from "@/api"
export default {
  data() {
    return {
      walletInfo: {},
      payPrice: '', // 充值金额
      isDisable: false, // 是否禁用按钮
    }
  },
  computed: {
    ...mapState({
      userId: (state) => state.user.userId,
    }),
    balance() {
      return this.walletInfo && (this.walletInfo.balance / 100).toFixed(2)
    },
  },
  methods: {
    async getWallet() {
      const res = await api.wallet.get()
      this.walletInfo = res?.data
    },

    async czSubmit() {
      if (!this.payPrice || this.payPrice <= 0) {
        this.$toast("请输入正确的充值金额")
        return
      }
      this.$showLoading("支付中...")
      this.isDisable = true
      let payOrderId = ""
      await api.wallet.recharge({payPrice: this.payPrice * 100}).then((res) => {
        if (res.code === 200) {
          payOrderId = res.data.payOrderId
        } else {
          this.isDisable = false
          this.$toast(res.msg || "充值失败，请稍后再试")
        }
      })
     
      if (payOrderId) {
        let canshu = {
          id: payOrderId,
          channelCode: "wx_lite",
        }
        await api.user.pay_order(canshu).then((res) => {
          if (res.code == 200) {
            let payObj = JSON.parse(res.data.displayContent)
            console.log(payObj)
            uni.requestPayment({
              timeStamp: payObj.timeStamp,
              nonceStr: payObj.nonceStr,
              package: payObj.packageValue,
              signType: payObj.signType,
              paySign: payObj.paySign,
              success: (succ) => {
                console.log(succ)
                if (succ.errMsg === "requestPayment:ok") {
                  uni.hideLoading()
                  this.isDisable = false
                  this.payPrice = '' // 清空充值金额
                  this.$toast("充值成功～")
                  this.getWallet() // 刷新钱包信息
                }
              },
              fail: (err) => {
                uni.hideLoading()
                this.isDisable = false
                this.$toast("充值失败！")
              },
            })
          } else {
            uni.hideLoading()
            this.isDisable = false
            this.$toast(res.msg)
          }
        })
      }
    }
  },
  onShow() {
    this.getWallet()
  },
}
</script>

<style lang="scss" scoped>
.content {
  min-height: 100vh;
  background: #f7f7f7;
  /deep/ .u-button {
    height: 96rpx;
    line-height: 96rpx;
    border-radius: 100rpx;
    background: #23ac39;
    font-size: 32rpx;
    text-align: center;
    font-weight: 500;
    color: #fff;
    border: none;
    margin: 120rpx auto 0 auto;
  }
  .head {
    position: relative;
    .bj {
      width: 100%;
      height: 330rpx;
      position: absolute;
      top: 0;
    }
    .tx_box {
      position: relative;
      margin: 0 30rpx 0 30rpx;
      top: 56rpx;
      .title {
        font-size: 28rpx;
        color: #fff;
      }
      .price {
        font-size: 80rpx;
        font-weight: 500;
        color: #fff;
        span {
          font-size: 26rpx;
          margin-right: 10rpx;
        }
      }
    }
  }
  .balance {
    position: relative;
    border-radius: 12rpx;
    padding: 0 30rpx 60rpx 30rpx;
    background: #fff;
    border-radius: 12rpx;
    background: #ffffff;
    margin: 80rpx 30rpx 0 30rpx;
    box-shadow: 0px 8rpx 20rpx 0px rgba(0, 0, 0, 0.05);
    img {
      position: absolute;
      right: 0;
      bottom: 0;
      width: 280rpx;
      height: 192rpx;
    }
    .input_box {
      .title {
        font-size: 26rpx;
        color: #666666;
        padding-top: 50rpx;
        margin-bottom: 40rpx;
      }
      .input {
        display: flex;
        padding-bottom: 22rpx;
        border-bottom: 1px solid #eeeeee;
        span {
          font-size: 32rpx;
          color: #666666;
          margin-right: 20rpx;
        }
      }
    }
    .text {
      font-size: 26rpx;
      color: #999999;
      text-align: center;
      margin-top: 10rpx;
    }
  }
}
</style>
